<template>
  <div class="navbar">
    <!-- @select="handleSelect" -->
    <div class="navbar-image">
      <el-image
        style="width: 100px; height: 50px"
        :src="src"
      />

    </div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      background-color="rgb(144,185,223)"
      text-color="#fff"
      active-text-color="#ffd04b"
      :router="true"
    >
      <el-menu-item index="/home">首页</el-menu-item>
      <el-submenu index="2">
        <template slot="title">选课</template>
        <el-menu-item index="/class/allclass">所有课程</el-menu-item>
        <el-menu-item index="/class/myclass">已约课程</el-menu-item>
      </el-submenu>
      <el-menu-item index="/searchteacher">老师信息</el-menu-item>
      <el-submenu index="4">
        <template slot="title">个人信息</template>
        <el-menu-item index="/personal/userinfo">我的信息</el-menu-item>
        <el-menu-item index="/personal/studyrecord">学习记录</el-menu-item>
        <el-menu-item index="/personal/usercollect">我的收藏</el-menu-item>
        <el-menu-item index="/personal/userconsume">我的消费</el-menu-item>
      </el-submenu>
      <el-menu-item index="/socket">服务中心</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    }
  },
  computed: {
    activeIndex() {
      return this.$route.path
    }
  },

  methods: {

  }
}
</script>

<style lang="scss" scoped>
.navbar{
    min-width: 1200px;
    background-color: rgb(144,185,223);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
        .navbar-image{
            position: absolute;
            left: 3%;
            top: 50%;
            margin-top: -25px;

    }
    .el-menu-demo{
        left: -15%;
        // padding-right:-540px;
    }

}
</style>
